<template>
	<view class="banji-wrap">
		<view class="i-top">
			<vs-ratio-view ratio="18/9" overflow="hidden">
				<image class="i-img" src="../../../static/img/m3.jpg"></image>
			</vs-ratio-view>
			<view class="tchinfo">
				<image class="t-img" :src="classInfo.wk_classImg||classInfo.tch_headimg||'../../../static/img/99.png'"></image>
				<view class="name">
					<view class="classname">{{classInfo.wk_className}}</view>
					<view class="tchname">
						<text>{{(classInfo.tch_name||classInfo.tch_nickname)}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main-i">
				<view class="i-title">班级介绍</view>
				<view v-if="classInfo.wk_classNote" class="i-desc">{{classInfo.wk_classNote}}</view>
				<view v-else class="i-else">暂无介绍</view>
				<view class="i-btn" @click="fnJionClass">加入班级</view>
			</view>
		</view>
		
		<view v-show="maskshow" class="msk"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maskshow:true,
				classInfo:''
			}
		},
		onLoad(option) {
			console.log("option:"+JSON.stringify(option))
			this.$fun.getClassInfobyId(option.wkid).then(res=>{
				this.classInfo=this.$store.state.classInfo
				this.fnCheckhasStudent(option.wkid)
			})
			
			
		},
		
		methods: {
			fnCheckhasStudent(wkid){
				let userid=uni.getStorageSync('userInfo').userid
				this.$fun.request({userid:userid,wkid:wkid},'php/xcx_checkhasstu.php').then(res=>{
					console.log(res)
					if(res.data.length>0){
						//console.log(999)
						if(res.data[0].isable>0){
							uni.reLaunch({
								url:'../daka/daka'
							})
						}else{
							this.maskshow=false
						}
					}else{
						this.maskshow=false
					}
				})
			},
			fnJionClass(){
				let userid=uni.getStorageSync('userInfo').userid
				console.log(667)
				if(!userid){
					uni.navigateTo({
						url:'../../mylogin/mylogin'
					})
				}else{
					uni.navigateTo({
						url:'../bindstudent/bindstudent'
					})
					
				}
				
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #ffae33;
	}
	.banji-wrap{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.msk{
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;top: 0;
			background-color: #ffae33;
		}
		.i-top{
			width: 90%;
			//background-color: #007AFF;
			//height: 300px;
			padding-bottom: 15px;
			margin: 0 auto;
			.i-img{
				width: 100%;
				height: 100%;
				border-radius: 10px;
			}
			.tchinfo{
				
				display: flex;
				align-items: center;
				margin-top: 20px;
				.t-img{
					width: 60px;
					height: 60px;
					border-radius: 100%;
					margin-right: 15px;
				}
				.name{
					font-size: 16px;
					color: #fff;
					.tchname{
						font-size: 12px;
						margin-top: 3px;
					}
				}
			}
		}
		.main{
			width: 100%;
			flex: 1;
			background: #fff;
			border-radius: 10px 10px 0 0;
			padding-top: 20px;
			position: relative;
			.main-i{
				width: 90%;
				//background: #007AFF;
				margin: 0 auto;
				
				.i-title{
					width: 100%;
					font-size: 16px;
					font-weight: bold;
					color: #666;
					//background-color: #007AFF;
				}
				.i-else{
					//background-color: #007AFF;
					text-align: center;
					padding: 30px 0;
				}
				.i-desc{
					width: 100%;
					font-size: 14px;
					white-space:normal;
					word-break:break-all;
					word-wrap:break-word; 
					color: #888;
					height: 200px;
					overflow-y: auto;
					margin-top: 5px;
				}
				.i-btn{
					width: 200px;
					height: 45px;
					display: flex;
					background-color: #ff9900;
					align-items: center;
					justify-content: center;
					border-radius: 4px;
					color: #fff;
					font-size: 16px;
					position: absolute;
					left: 0; right: 0;
					margin: 0 auto;
					bottom: 50px;
					&:active{
						background-color: #ffae33;
					}
				}
			}
		}
	}
</style>
